
<template>
  <div class="onershipDiv">
    <h3 class="title">名称XXX</h3>
    <a-tabs defaultActiveKey="1" @change="callback">
      <a-tab-pane tab="未归类房源" key="1">
        <a-checkbox :indeterminate="indeterminate_check" @change="onCheckAllChange_check" :checked="checkAll_check">勾选归属房</a-checkbox>
        <a-checkbox-group v-model="checkedList_check" @change="onChange_check">
          <a-list size="large" :dataSource="checkSel">
            <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
              <a-checkbox :value="item.val">{{ item.name }}</a-checkbox>
            </a-list-item>
          </a-list>
        </a-checkbox-group>
      </a-tab-pane>
      <a-tab-pane tab="已归类房源" key="2" forceRender>
        <a-checkbox :indeterminate="indeterminate_cancel" @change="onCheckAllChange_cancel" :checked="checkAll_cancel">勾选归属房源</a-checkbox>
        <a-checkbox-group v-model="checkedList_cancel" @change="onChange_cancel">
          <a-list size="large" :dataSource="cancelSel">
            <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
              <a-checkbox :value="item.val">{{ item.name }}</a-checkbox>
            </a-list-item>
          </a-list>
        </a-checkbox-group>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
const checkSel = [
  { name: 'Racing car sprays burning fuel into crowd.', val: '1' },
  { name: 'Racing car sprays burning fuel into crowd.', val: '2' },
  { name: 'Racing car sprays burning fuel into crowd.', val: '3' },
  { name: 'Racing car sprays burning fuel into crowd.', val: '4' },
  { name: 'Racing car sprays burning fuel into crowd.', val: '5' }
]
const cancelSel = [
  { name: 'Racing car sprays burning fuel into crowd.', val: '1' },
  { name: 'Racing car sprays burning fuel into crowd.', val: '2' },
  { name: 'Racing car sprays burning fuel into crowd.', val: '3' },
  { name: 'Racing car sprays burning fuel into crowd.', val: '4' },
  { name: 'Racing car sprays burning fuel into crowd.', val: '5' }
]
export default {
  name: 'HousingOwnership',
  props: {
    order: {
      type: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      checkedList_check: [], // 选中数组
      checkedList_cancel: [], // 选中数组
      indeterminate_check: true, // 全选样式
      indeterminate_cancel: true,
      checkAll_cancel: false, // 是否全选
      checkAll_check: false,
      checkSel, // 数据各项
      cancelSel, // 数据各项
      check: [], // 全选数组
      cancel: []
    }
  },
  created () {
    this.checkSel.forEach(element => {
      this.check.push(element.val)
    })
    this.cancelSel.forEach(element => {
      this.cancel.push(element.val)
    })
  },
  methods: {
    // tab切换事件
    callback (key) {
      console.log(key)
    },
    // 复选框事件勾选
    onChange_check (checkval) {
      console.log(checkval)
      this.indeterminate_check = !!checkval.length && (checkval.length < this.checkSel.length)
      this.checkAll_check = checkval.length === this.checkSel.length
      this.checkedList_check = checkval
    },
    // 复选框事件取消
    onChange_cancel (cancelkval) {
      this.indeterminate_cancel = !!cancelkval.length && (cancelkval.length < this.cancelSel.length)
      this.checkAll_cancel = cancelkval.length === this.cancelSel.length
      this.checkedList_cancel = cancelkval
    },
    // 所有勾选
    onCheckAllChange_check (e) {
      Object.assign(this, {
        checkedList_check: e.target.checked ? this.check : [],
        indeterminate_check: false,
        checkAll_check: e.target.checked
      })
    },
    // 所有取消
    onCheckAllChange_cancel (e) {
      Object.assign(this, {
        checkedList_cancel: e.target.checked ? this.cancel : [],
        indeterminate_cancel: false,
        checkAll_cancel: e.target.checked
      })
    }
  }
}
</script>
<style lang="less" scoped >
  .onershipDiv{
    position: relative;
    .title{
      position:absolute;
      font-size:16px;
    }
    /deep/.ant-tabs-nav-scroll{
      text-align: right;
    }
    .ant-checkbox-group{display: block;}
  }
</style>
